import React from "react";
import { Line } from "react-chartjs-2";

const data = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [
    {
      label: "Glukoz",
      data: [5, 2, 7, 2, 4],
      borderColor: "rgba(75, 192, 192, 1)", // Customize line color
      fill: false,
      tension: 0.1, // Adjust line tension for smoother curves
    },
    {
        label: "Glykoz",
        data: [1, 5, 7, 6, 6],
        borderColor: "rgba(75, 50, 192, 1)", // Customize line color
        fill: false,
        tension: 0.1, // Adjust line tension for smoother curves
      },
  ],
};

const options = {
    elements: {
        point:{
            radius: 0
        }
    },
    plugins: { legend: { display: false } },
  scales: {
    x: {
      display: false,
      title: {
        display: false,
        text: "Day",
      },
    },
    y: {
      display: false,
      title: {
        display: true,
        text: "Value",
      },
    },
  },
  
};

const LineChart = () => {
  return (
    <div className="Char" style={{display:"flex",marginTop:'auto',marginBottom:'auto', justifyContent:"center",borderRadius:"5px", width: "72px", height: "72px",backgroundColor:'white',marginLeft:'4px'}}>
      <div style={{width: "100%",height:'50px',marginTop:'auto',marginBottom:'auto'}}>
        <Line  data={data} options={options} />
      </div>
    </div>
  );
};

export default LineChart;
